.platform-android, .platform-override {
  .bar {
    @extend .bar;
    height: $bar-height;
    line-height: $bar-height;
    background-image: none !important;
    padding: 0;
  }

  .not-casting-shadow {
    .bar-header {
      box-shadow: none;
      z-index: inherit;
    }

  }

  .bar-header {
    @include shadow-2dp();
    display: flex;
    z-index: 9;

    &.not-casting-shadow {
      box-shadow: none;
      z-index: inherit;
    }

    &.bar-header--expanded {
      height: $expanded-bar-height;

      .title {
        @include typo-headline();
        margin-top: $bar-height;
        line-height: $layout-header-mobile-baseline;
      }

      + .has-header {
        top: $expanded-bar-height;
      }

      + .bar-subheader {
        top: $expanded-bar-height;
      }

      + .tabs, + .tabs-top > .tabs, .tabs.tabs-top {
        top: $expanded-bar-height - 2;
      }
    }

    .title {
      @extend .mdl-layout-title;
      position: absolute;
      text-align: left;
      line-height: $bar-height;
    }

    .button:first-child + .title, .buttons.buttons-left + .title {
      left: 72px !important; // Don't want nav transition to change position
    }

    .buttons.hide + .title {
      left: inherit !important; // Don't want nav transition to change position
    }

    &.bar-light {
      @extend .bar-light;
    }

    &.bar-stable {
      @extend .bar-stable;
    }

    &.bar-positive {
      @extend .bar-positive;
    }

    &.bar-calm {
      @extend .bar-calm;
    }

    &.bar-balanced {
      @extend .bar-balanced;
    }

    &.bar-energized {
      @extend .bar-energized;
    }

    &.bar-assertive {
      @extend .bar-assertive;
    }

    &.bar-royal {
      @extend .bar-royal;
    }

    &.bar-dark {
      @extend .bar-dark;
    }

    .bar-light,
    .bar-stable,
    .bar-positive,
    .bar-calm,
    .bar-balanced,
    .bar-energized,
    .bar-assertive,
    .bar-royal,
    .bar-dark {
      background-image: none !important;
    }
  }

  .bar.bar-subheader {
    top: $bar-height - 1;
    height: $bar-subheader-height;

    .title {
        @include typo-subhead();
        text-align: left;
        line-height: $bar-subheader-height;
        opacity: 0.54;
        font-weight: 500;
    }
  }

  .bar {
    .button, .back-button {
      @extend .button-clear;
      @extend .mdl-navigation__link;
      min-width: $button-min-width;
      background-color: transparent !important;
      padding-left: 8px;
      padding-right: 8px;
      text-align: center;

      &:hover, &:focus {
        color: inherit;
      }

      &.icon, &.back-button {
        min-height: $bar-height - 1;
        border-radius: 0;

        &:first-child {
          margin-left: 5px;
          box-shadow: none;
        }

        &.icon:before,
        &:before,
        &.icon-left:before,
        &.icon-right:before {
          padding: 0;
          transform: translate(- ($button-fab-font-size / 2), - $button-fab-font-size / 2);
        }

        & .mdl-button__ripple-container {
          height: 32px;
          width: 32px;
          transform: translate($button-fab-font-size / 2, $button-fab-font-size / 2);
        }
      }

      &.icon, &.button-icon {
        min-width: 56px;
        width: 56px;
      }

      &.back-button {
        display: block;

        .mdl-button__ripple-container {
          opacity: 0;
        }

        .icon:before {
          line-height: $bar-height;
        }

        &.hide {
          display: none;
        }
      }

      &.back-button.active,
      &.back-button.activated {
        opacity: 1;
      }
    }
  }

  .bar .title + .button:last-child,
  .bar > .button + .button:last-child,
  .bar > .button.pull-right,
  .bar .buttons.pull-right {
    top: 8px;
  }

  .bar .buttons-right span {
    margin-left: 0;
  }

  .bar .title + .buttons {
    top: 0;
    bottom: 0;

    .right-buttons, .left-buttons {
      //padding-top: 8px;
    }

    &.buttons-right {
      right: 0;
    }
  }
}
